<template>
	<view  class="map_page">
		<view class="app-title ac">
			<view class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</view>位置
			<!-- <text class="fr">
				<image class="more" mode='aspectFit' src="/static/img/user.png"></image>
			</text> -->
		</view>
		<map class="map" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers">
			<cover-view style="position: absolute;bottom: 70px;left: 20px;right: 20px;padding: 0 20px;background: #fff;line-height: 40px;">test</cover-view>
			<cover-view style="position: absolute;bottom: 30px;left: 20px;right: 20px;padding: 0 20px;background: #fff;line-height: 40px;" @click="callUser('1388888888')">1388888888</cover-view>
		</map>
		<!-- <view class="manager ac flex" style="margin-top: 20px;padding-left: 20px;padding-right: 20px;">
			<view  class="tips_left">
				<image src='/static/img/index-icon2.png' mode='aspectFill' class="bell_img"></image>
				<view class="tips_left_content">
					<view class="tips_left_title">某某某</view>
					<view>180****1199</view>
				</view>
			</view>
			<image class="arrow_img" src='/static/img/arrow.png' mode='aspectFit'></image>
		</view> -->
		<!-- <cover-view style="position: absolute;background-color: #fff;box-shadow: -2px -2px 4px rgb(0 0 0 / 5%), 2px 2px 4px rgb(0 0 0 / 5%);padding: 20px;top: 6%;left: 20px;right: 20px;border-radius: 8px;z-index: 99999999;">
			<image src='/static/img/index-icon2.png' mode='aspectFill' class="bell_img"></image>
			<view  class="fr" style="width:80%;font-size: 14px;padding-top: 4px;position:relative;">
				<view style="font-size: 18px;"><b>简单的自定义 controls</b></view>
				<view>xxxxxxxxxx</view>
				<image src="/static/img/arrow.png" style="width: 8px;height:12px;position: absolute;right: 0;top: 16px;"></image>
			</view>
		</cover-view> -->
		<!-- <cover-view class="manager ac flex" style="margin-top: 20px;padding-left: 20px;padding-right: 20px;z-index: 999999999;">
			<view  class="tips_left">
				<image src='/static/img/index-icon2.png' mode='aspectFill' class="bell_img"></image>
				<view class="tips_left_content">
					<view class="tips_left_title">某某某</view>
					<view>180****1199</view>
				</view>
			</view>
			<image class="arrow_img" src='/static/img/arrow.png' mode='aspectFit'></image>
		</cover-view> -->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				tab: 0,
				start: '',
				end: '',
				latitude: 39.909, // 默认定在首都
				longitude: 116.39742,
				scale: 19, // 默认16
				markers: [],
				show_user: false
			}
		},
		onLoad() {
			this.checkLocation();
			// this.getLocation();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			callUser(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, //item.phone,
					success: (res) => {
						console.log(1);
					},
				});
			},
			checkLocation() {
				let system = uni.getSystemInfoSync(); // 获取系统信息
				if (system.platform === 'android') {
					// 判断平台
					var context = plus.android.importClass('android.content.Context');
					var locationManager = plus.android.importClass('android.location.LocationManager');
					var main = plus.android.runtimeMainActivity();
					var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
					if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
						uni.showModal({title: '请打开定位服务功能',icon:'none'});
						setTimeout(()=>{
							uni.navigateBack();
						},1500)
					}else{
						this.getLocation();
					}
				}
			},
			getLocation() {
				uni.getLocation({
				    type: 'gcj02',
					geocode: true,//获取城市具体地址
				    success: (res) => {
				        // console.log('当前位置的经度：' + res.longitude);
				        // console.log('当前位置的纬度：' + res.latitude);
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.markers = [
						      {
						              id: "",
						              latitude: res.latitude,
						              longitude: res.longitude,
						              iconPath: "../../static/img/position.png",
						              width: 50, //宽
						              height: 50, //高
						            }
						];
						this.show_user = true;
				    },
					fail:function(res){
						uni.showToast({title:res,icon:'none'});
						console.log(res);
					}
				});
			}
		}
	}
</script>

<style scoped>
	.map_page{
		position: relative;min-height: 100vh;
	}
	
	.tips_left{
		display: flex;
	}
	
	.tips_left .tips_left_title{
		color: #000;
		font-size: 18px;
		margin-bottom: 2px;
		font-weight: bold;
	}
	.tips_left>.tips_left_content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10px;
		text-align: left;
	}
	
	.bell_img{
		width: 44px;
		height: 44px;
	}
	.arrow_img{
		width: 14px;
		height: 14px;
	}
	.flex{
		display: flex;
		position: absolute;
		background-color: #fff;
		box-shadow: -2px -2px 4px rgb(0 0 0 / 5%), 2px 2px 4px rgb(0 0 0 / 5%);
		padding: 20px;
		bottom: 5px;
		left: 20px;
		right: 20px;
		border-radius: 8px;
		align-items: center;
		justify-content: space-between;
	}
	.map{
		width: 100%;
		height: calc(100vh - 44px);
	}
	.my-work {
		background: #fff;
		margin-bottom: 16px;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
	}

	.my-work>.menu {
		width: 37.5%;
		color: #3E3A39;
		line-height: 54px;
		position: relative;
	}

	.my-work>.menu:nth-child(3) {
		border-left: 1px solid #d7d7d7;
		width: 25%;
	}

	.my-work>.menu>.on {
		color: #307BE0;
		border-bottom: 2px solid #307BE0;
	}

	.my-work>.menu>.num {
		position: absolute;
		top: 10px;
		right: 20%;
		background: #FA5151;
		width: 15px;
		height: 15px;
		font-size: 10px;
		border-radius: 50%;
		color: #fff;
		line-height: 14px;
	}

	.select {
		width: 15px;
		height: 15px;
		margin-left: 5px;
		vertical-align: middle;
	}

	.work-item {
		width: 91.5%;
		margin: 0 auto;
	}

	.work-item>.item {
		line-height: 50px;
		font-size: 14px;
		margin-top: 16px;
		background: #FFFFFF;
		box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		padding-left: 25px;
	}

	.work-item>.item>.line {
		width: 30px;
		height: 8px;
		margin-right: 20px;
		margin-top: 22px;
	}

	.work-item>.item>.total {
		margin: 0 50px;
		height: 50px;
	}

	.work-item>.item .icon {
		width: 26px;
		height: 26px;
		vertical-align: middle;
	}

	.one {
		background: #E93636;
	}

	.two {
		background: #ED983B;
	}

	.three {
		background: #71C76F;
	}

	.four {
		background: #DA8AFF;
	}
</style>
